<template>
	<div class="box">
		<v-header :title="'服务支持'"></v-header>
		<div class="service">
			<div class="service-item" @touchstart="routerPush('service/introduction')">
				<img src="../../common/images/SoftwareDescription-.png" alt="" />
				<div>软件简介</div>
			</div>
			<div class="service-item" @touchstart="routerPush('service/operation')">
				<img src="../../common/images/Operationguide-.png" alt="" />
				<div>操作指南</div>
			</div>
			<div class="service-item" @touchstart="routerPush('service/contacts')">
				<img src="../../common/images/Contact-.png" alt="" />
				<div>联系人</div>
			</div>
			<div class="service-item" @touchstart="routerPush('service/purchase')">
				<img src="../../common/images/Methodofpurchase-.png" alt="" />
				<div>购买方式</div>
			</div>
		</div>
	</div>
</template>

<script>
	import VHeader from 'components/v-header'
	import VMask from 'components/v-mask'
	import Loading from 'components/loading'
	import BottomBar from 'components/bottom-bar'
	
	export default {
		components: {
			BottomBar,
			Loading,
			VMask,
			VHeader
		},
		
	}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

	.box
		position fixed
		width 100%
		height 100%
		background-color $color-bg-gray
		.service
			display flex
			flex-wrap wrap
			.service-item
				background #fff
				flex 0 0 50%
				padding 40px 0
				display flex
				flex-direction column
				align-items center
				font-size $font-size-large
				img
					width 50px
					margin-bottom 20px
					
				&:nth-child(1)
					border-right 5px solid $color-bg-gray
					border-bottom 5px solid $color-bg-gray
				
				&:nth-child(2)
					border-bottom 5px solid $color-bg-gray
					
				&:nth-child(3)
					border-right 5px solid $color-bg-gray
</style>